<%@ page language="java" contentType="text/html" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    
    <title>My JSP 'index.jsp' starting page</title> 
<meta http-equiv="content" content="text/html;charset=utf-8">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

<script>
    function showMsg(e){
        $(e.target).attr('disabled', true);
        $.ajax({
            url: "msg.jsp",
            data: {gender: $("#gender").val(), name: $("#name").val()},
            error: function(xhr){
                alert("Ajax request error!");
                $(e.target).attr("disabled", false);
            },
            success: function(response){
                $("#msg").html(response);
                $("#msg").fadeIn();
                setTimeout(function(){
                    $("#msg").fadeOut();
                    $(e.target).attr("disabled", false);
                }, 3000);    
            }
        });
    }
 
    $(document).ready(function(e){
        //$("#clickBtn").bind("click", showMsg);
        $("#clickBtn").bind("customEvent", showMsg);  
        $("#clickBtn").click(function(){
            $("#clickBtn").trigger("customEvent");  
        });
  
        $("#loading").ajaxStart(function(e){
            $(e.target).show();
        });
        $("#loading").ajaxComplete(function(e){
            $(e.target).hide();
        });
    }); 
</script>

</head>

<body>
<div id="loading" style="display: none;">Loading......</div>
<select id="gender">
    <option>Male</option>
    <option>Female</option>
</select>
<input id="name" type="text">

<div id="msg"></div><input id="clickBtn" type="button" value="Click Me">


</body>
</html>